<template>
  <div class="searchCache" :style="{height: deviceHeight+'px'}">
    <div class="search-title clearfix">
      <input type="text" id="searchWord" class="searchWord" v-defaultFocus="true" v-model="contractNo" @blur.stop="onBlur" @focus.stop="onFocus" @input.stop="onSearchInput">
      <button class="searchBtn" @click.stop="searchByHouseNumber(contractNo)"></button>
      <a href="javascript:;" class="search-cancel" @click="cancelSearch">取消</a>
    </div>
    <ul id="history-list" v-show="showHistoryList">
      <li v-for="item in searchHistoryCache" @click.stop="searchByHouseNumber(item)">{{item}}</li>
      <li id="clear-history-list" @click.stop="clearHistory">清除搜索记录 (共 {{searchHistoryCache.length}} 条)</li>
    </ul>

  </div>
</template>
<script>
  import { SEARCH_HISTORY_CACHE_KEY, deviceHeight } from '../../assets/js/config'
  import cache from '../../assets/js/cache'
  export default {
    name: 'serviceList',
    data () {
      return {
        contractNo: '',
        showHistoryList: 0,
        searchHistoryCache: [],
        deviceHeight,
        state: null
      }
    },
    created () {
      let historyCache = cache.get(SEARCH_HISTORY_CACHE_KEY)
      this.searchHistoryCache = historyCache === null ? [] : historyCache.split(',')
      this.showHistoryList = this.searchHistoryCache.length
      let params = this.$route.params
      this.state = params.state
      if (params.contractNo !== undefined && params.contractNo !== '') {
        this.contractNo = params.contractNo
      }
    },
    directives: {
      defaultFocus: {
        inserted (el, {value}) {
          if (value) {
            el.focus()
          }
        }
      }
    },
    methods: {
      onBlur () {
        let self = this
        setTimeout(function () {
          self.showHistoryList = 0
        }, 10)
      },
      onFocus () {
        this.showHistoryList = this.searchHistoryCache.length > 0 ? (this.contractNo === '' ? 1 : 0) : 0
      },
      onSearchInput () {
        let list = this.searchHistoryCache
        this.showHistoryList = this.contractNo.length === 0 ? (list.length ? 1 : 0) : 0
      },
      setInput (data) {
        this.contractNo = data
        this.setCache()
      },
      setCache () {
        let msg = this.contractNo
        let cacheList = this.searchHistoryCache
        let flag = cacheList.indexOf(msg) > -1
        if (!flag) {
          cacheList.push(msg)
          if (cacheList.length > 10) {
            cacheList.shift()
          }
        }
        cache.set(SEARCH_HISTORY_CACHE_KEY, cacheList.join(','))
      },
      clearHistory () {
        cache.del(SEARCH_HISTORY_CACHE_KEY)
        this.searchHistoryCache = []
      },
      cancelSearch () {
        this.$router.go(-1)
      },
      searchByHouseNumber (data) {
        if (data) {
          let contractNo = data
          this.setInput(data)
          if (this.state === 0) {
            this.$router.push({name: 'serviceListByHouseNumber', params: {contractNo}})
          } else if (this.state === 1) {
            this.$router.push({name: 'passwordList', params: {contractNo}})
          }
        }
      }
    }
  }
</script>
<style scoped>
  @import '../../assets/css/searchStyle.css';
  .search-cancel {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: right;
    width: auto;
    padding:0 20px;
    border:1px solid #aaa;
    height:0.66rem;
    line-height:0.64rem;
    margin: 0.1rem 0.1rem;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #666;
  }
  .search-cancel:active {
    background-color: #666;
    color: #ffffff;
  }
  .searchBtn{
    position: absolute;
    top:2px;
    left: 60%;
    display: block;
    height:.8rem;
    width:13%;
    border:0;
    border-right: .24rem solid transparent;
    border-left: .24rem solid transparent;
    background: url('./../../assets/img/search@2x.png') no-repeat center center;
    -webkit-background-size:contain;
    background-size:contain;
  }
</style>
